<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-date-picker
          v-model="caeateTime"
          placeholder="新增日期"
          value-format="yyyy-MM-dd"
          @change="getDataTime()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['gua_type.eq']"
          @change="getData()"
          :options="enumGuaType"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['channel_type.eq']"
          @change="getData()"
          :options="{
            1: '便捷（增量）',
            0: '常规（存量）',
          }"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:type="scope">
        <div>{{ enumGuaType[scope.row.gua_type] || '' }}</div>
        <div v-if="scope.row.gua_type">
          <small v-if="+scope.row.gua_type === 4">
            {{ +scope.row.channel_type === 0 ? '常规' : '便捷' }}
          </small>
          <small v-else>{{ +scope.row.channel_type === 0 ? '存量' : '增量' }}</small>
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/common/utils/common'
export default {
  components: {},
  data() {
    return {
      enumGuaType: {
        4: '省联担',
        2: '直担',
        3: '限率',
      },
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'service_name' } },
        { attrs: { label: '银行名称', prop: 'bank_name' } },
        { attrs: { label: '业务类型', prop: 'gua_type', align: 'center' }, slot: 'type' },
        { attrs: { label: '新增日期', prop: 'create_time', align: 'center' } },
        { attrs: { label: '处理人', prop: 'submit_person_name', align: 'center' } },
        { attrs: { label: '客户名称', prop: 'customer_name', align: 'center' } },
        { attrs: { label: '组织类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
      ],
      params: {
        index: 1,
        size: 10,
        create_time: '',
      },
      caeateTime: '',
      serviceName: '',
      totalCount: 0,
    }
  },

  created() {
    this.caeateTime = dateFormat(new Date(), 'yyyy-MM-dd')
    this.getDataTime()
  },
  methods: {
    getDataTime() {
      this.params['create_time.gte'] = dateFormat(this.caeateTime, 'yyyy-MM-dd')
      this.params['create_time.lt'] = `${dateFormat(this.caeateTime, 'yyyy-MM-dd')} 23:59:59`
      this.getData()
    },
    getData() {
      if (!this.caeateTime) {
        return
      }
      this.loading = true
      this.$api
        .getData('credit', 'customer_related', this.params, { service_name: 'desc' })
        .then(res => {
          this.tableData = res?.data?.data || []
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
